<template>
  <div class="timeLineBox">
    <el-timeline>
      <el-timeline-item v-for="(item,index) in optionList" :key="index" :icon="item.icon" :type="item.type" :color="item.color" placement="top">
        <div class="shenheTitle">
          {{item.processName}}
        </div>
        <el-card class="cardItem">
          <div class="shenheBox">
            <div class="shenheBoxTop">
              <div class="shenheBoxTop_left">
                <div class="shenheText">
                  <i style="color: #67C23A;font-size:18px;margin-right:5px;" class="el-icon-success" v-if="item.auditResult=='APPROVED'"></i>
                  <i style="color: #f56c6c;font-size:18px;margin-right:5px;" class="el-icon-circle-close" v-if="item.auditResult=='REJECTED'"></i>
                  <span>{{item.operation}}</span>
                </div>
                <div class="shenheBoxTop_people" style="margin-left:70px;">
                  <p style="font-size:14px;color:#b0b0b0;">审查人</p>
                  <p style="font-size:14px;margin-left:7px;">
                    <img :src="$https+item.auditSignatory" width="105px" height="59px" />
                  </p>
                </div>
              </div>
              <div style="color:#a396a3;" class="shenheBoxTop_right">
                {{item.auditTime}}
              </div>
            </div>
            <div class="shenheBoxBottom">
              <!-- <p style="margin-right:5px;">经办意见：</p> -->
              <p>
                {{item.opinion}}
              </p>
            </div>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import {getProjectProcessedStep} from '@/api/common'
export default {
  name: "optionList",
  //props: ["optionList"],
  data() {
    return {
      checked:true,
      optionList:[]
    };
  },
  watch: {
    
  },
  methods: {
    getProgress(){//查询流程节点
      let obj={
        projectId:localStorage.getItem("projectId")
      }
      getProjectProcessedStep(obj).then(res=>{
        console.log(res,'res')
        if(res.data!=null){
          this.optionList=res.data
        }
      })
    }
  },
  created() {
    this.getProgress()
  }
};
</script>

<style lang="scss" scoped>
.shenheTitle{
  margin-bottom: 15px;
}
/deep/ .el-timeline-item__timestamp.is-top{
  margin-bottom: 1px;
}
/deep/ .el-card__body{
  padding: 6px 20px 10px;
}
.cardItem{
  width: 75%;
}
.shenheBox{
  width: 100%;
  .shenheBoxTop{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .shenheBoxTop_left{
      display: flex;
      align-items: center;
      .shenheText{
        display: flex;
        align-items: center;
      }
      .shenheBoxTop_people{
        display: flex;
        align-items: center;
      }
    }
  }
  .shenheBoxBottom{
    width: 100%;
    overflow: hidden;
    background-color: #f1f1f1;
    box-sizing: border-box;
    padding: 15px 25px;
    border-radius: 5px;
    p{
      font-size: 14px;
      margin: 0;
      float: left;
    }
    p:first-child{
      width: 80px;
      color:#969696;
    }
    p:last-child{
      width: calc(100% - 90px)
    }
  }
}

</style>
